<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>套餐横向对比预览</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
            line-height: 1.6;
            overflow-x: auto;
        }
        
        /* 预览容器 */
        .preview-container {
            min-width: 900px;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 40px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            border-radius: 8px;
            position: relative;
        }
        
        /* 操作按钮 */
        .action-buttons {
            min-width: 900px;
            max-width: 1200px;
            margin: 0 auto 20px;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: background-color 0.2s;
        }
        
        .btn-primary {
            background-color: #165DFF;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #0E4CD1;
        }
        
        .btn-secondary {
            background-color: white;
            color: #165DFF;
            border: 1px solid #165DFF;
        }
        
        .btn-secondary:hover {
            background-color: #f0f5ff;
        }
        
        /* 头部信息 */
        .header-info {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .company-logo {
            width: 120px;
            height: 60px;
            background-color: #165DFF;
            margin: 0 auto 15px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }
        
        .document-title {
            font-size: 24px;
            font-weight: 700;
            color: #333;
            margin-bottom: 10px;
        }
        
        .document-subtitle {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .quote-reference {
            display: flex;
            justify-content: center;
            gap: 20px;
            font-size: 14px;
            color: #555;
        }
        
        /* 产品信息 */
        .product-info {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 6px;
        }
        
        .product-info h2 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .product-info h2::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 18px;
            background-color: #165DFF;
            border-radius: 2px;
        }
        
        .product-details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            font-size: 14px;
        }
        
        .detail-item {
            display: flex;
        }
        
        .detail-label {
            font-weight: 500;
            color: #666;
            min-width: 100px;
        }
        
        .detail-value {
            color: #333;
        }
        
        /* 套餐对比表格 */
        .comparison-section {
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 18px;
            background-color: #165DFF;
            border-radius: 2px;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .comparison-table th,
        .comparison-table td {
            padding: 14px 15px;
            text-align: center;
            border-bottom: 1px solid #eee;
            font-size: 14px;
        }
        
        .comparison-table th:first-child,
        .comparison-table td:first-child {
            text-align: left;
            font-weight: 500;
            width: 30%;
            background-color: #f9f9f9;
            position: sticky;
            left: 0;
            z-index: 10;
        }
        
        .comparison-table th {
            background-color: #f5f8ff;
            color: #165DFF;
            font-weight: 600;
            position: relative;
        }
        
        .package-column {
            width: 23.33%;
        }
        
        .package-header {
            background-color: #f0f5ff;
        }
        
        .package-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #165DFF;
        }
        
        .package-price {
            font-size: 18px;
            font-weight: 700;
            color: #333;
        }
        
        .price-period {
            font-size: 12px;
            color: #666;
        }
        
        .feature-yes {
            color: #36b37e;
            font-weight: 500;
        }
        
        .feature-no {
            color: #ccc;
            text-decoration: line-through;
        }
        
        .highlight-cell {
            background-color: #f0f7ff;
            font-weight: 500;
        }
        
        /* 备注信息 */
        .notes-section {
            margin-bottom: 40px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .notes-section h3 {
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }
        
        .notes-content {
            color: #555;
            line-height: 1.7;
        }
        
        /* 页脚信息 */
        .footer-info {
            border-top: 2px solid #f0f0f0;
            padding-top: 20px;
            font-size: 14px;
            color: #666;
            display: flex;
            justify-content: space-between;
        }
        
        .contact-info {
            text-align: right;
        }
        
        /* 打印样式 */
        @media print {
            body {
                background-color: white;
                padding: 0;
                overflow-x: visible;
            }
            
            .action-buttons {
                display: none;
            }
            
            .preview-container {
                box-shadow: none;
                padding: 0;
                min-width: auto;
                max-width: 100%;
            }
            
            .header-info, .footer-info {
                color: #000;
            }
            
            .comparison-table th,
            .comparison-table td {
                border-color: #ccc;
            }
            
            .comparison-table th:first-child,
            .comparison-table td:first-child {
                background-color: #f0f0f0;
            }
        }
    </style>
</head>
<body>
    <!-- 操作按钮 -->
    <div class="action-buttons">
        <button class="btn btn-secondary" id="back-btn">返回编辑</button>
        <button class="btn btn-primary" id="switch-view-btn">切换为列表视图</button>
        <button class="btn btn-primary" id="print-btn">打印报价单</button>
        <button class="btn btn-primary" id="export-btn">导出PDF</button>
    </div>
    
    <!-- 预览容器 -->
    <div class="preview-container">
        <!-- 头部信息 -->
        <div class="header-info">
            <div class="company-logo">公司标志</div>
            <h1 class="document-title">产品套餐横向对比</h1>
            <div class="document-subtitle">智能办公系统 V3.0 各版本套餐详细对比</div>
            <div class="quote-reference">
                <div>报价单号: QUO-2023-0618</div>
                <div>日期: 2023年6月18日</div>
            </div>
        </div>
        
        <!-- 产品信息 -->
        <div class="product-info">
            <h2>产品信息</h2>
            <div class="product-details">
                <div class="detail-item">
                    <div class="detail-label">产品名称:</div>
                    <div class="detail-value">智能办公系统 V3.0</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">产品ID:</div>
                    <div class="detail-value">PROD-2023-0589</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">版本:</div>
                    <div class="detail-value">企业级</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">项目ID:</div>
                    <div class="detail-value">MEI-2023-1254</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">门店ID:</div>
                    <div class="detail-value">STORE-008</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">业务线ID:</div>
                    <div class="detail-value">CYBER-2023</div>
                </div>
            </div>
        </div>
        
        <!-- 套餐对比表格 -->
        <div class="comparison-section">
            <h3 class="section-title">套餐详细对比</h3>
            <table class="comparison-table">
                <thead>
                    <tr>
                        <th>功能/套餐</th>
                        <th class="package-column">
                            <div class="package-name">基础版</div>
                            <div class="package-price">¥3,800</div>
                            <div class="price-period">一次性付费</div>
                        </th>
                        <th class="package-column">
                            <div class="package-name">标准版</div>
                            <div class="package-price">¥8,600</div>
                            <div class="price-period">一次性付费</div>
                        </th>
                        <th class="package-column">
                            <div class="package-name">企业版</div>
                            <div class="package-price">¥19,800</div>
                            <div class="price-period">一次性付费</div>
                        </th>
                        <th class="package-column">
                            <div class="package-name">定制版</div>
                            <div class="package-price">面议</div>
                            <div class="price-period">根据需求</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 用户授权 -->
                    <tr>
                        <td>用户授权数量</td>
                        <td>50用户</td>
                        <td>200用户</td>
                        <td>500用户</td>
                        <td class="highlight-cell">按需定制</td>
                    </tr>
                    
                    <!-- 核心功能 -->
                    <tr>
                        <td>核心办公模块</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                    </tr>
                    <tr>
                        <td>考勤管理系统</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                    </tr>
                    <tr>
                        <td>审批流程管理</td>
                        <td class="feature-yes">基础版</td>
                        <td class="feature-yes">完整版</td>
                        <td class="feature-yes">高级版</td>
                        <td class="highlight-cell">定制版</td>
                    </tr>
                    <tr>
                        <td>文档协作</td>
                        <td class="feature-yes">基础版</td>
                        <td class="feature-yes">完整版</td>
                        <td class="feature-yes">完整版</td>
                        <td class="feature-yes">完整版</td>
                    </tr>
                    <tr>
                        <td>移动端应用</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                    </tr>
                    
                    <!-- 存储与安全 -->
                    <tr>
                        <td>云存储空间</td>
                        <td>50GB</td>
                        <td>200GB</td>
                        <td>1TB</td>
                        <td class="highlight-cell">按需定制</td>
                    </tr>
                    <tr>
                        <td>数据备份</td>
                        <td>每日备份</td>
                        <td>每日备份</td>
                        <td>实时备份</td>
                        <td>实时备份</td>
                    </tr>
                    <tr>
                        <td>数据加密</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                    </tr>
                    
                    <!-- 技术支持 -->
                    <tr>
                        <td>技术支持时长</td>
                        <td>3个月</td>
                        <td>12个月</td>
                        <td>36个月</td>
                        <td class="highlight-cell">按需定制</td>
                    </tr>
                    <tr>
                        <td>支持响应时间</td>
                        <td>24小时</td>
                        <td>12小时</td>
                        <td>4小时</td>
                        <td class="highlight-cell">2小时</td>
                    </tr>
                    <tr>
                        <td>上门服务</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-yes">3次/年</td>
                        <td class="highlight-cell">按需定制</td>
                    </tr>
                    
                    <!-- 升级与定制 -->
                    <tr>
                        <td>免费升级</td>
                        <td>1年</td>
                        <td>2年</td>
                        <td>3年</td>
                        <td class="highlight-cell">按需定制</td>
                    </tr>
                    <tr>
                        <td>定制报表</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                    </tr>
                    <tr>
                        <td>API接口</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-yes">包含</td>
                        <td class="feature-yes">包含</td>
                    </tr>
                    <tr>
                        <td>专属功能开发</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-no">不包含</td>
                        <td class="feature-no">不包含</td>
                        <td class="highlight-cell">包含</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 备注信息 -->
        <div class="notes-section">
            <h3>报价说明</h3>
            <div class="notes-content">
                <p>1. 本报价有效期为30天，自报价日期起计算。</p>
                <p>2. 所有套餐价格均不含税费，如需开具发票，将按国家规定税率增收。</p>
                <p>3. 技术支持服务时间为工作日9:00-18:00，不包含法定节假日。</p>
                <p>4. 套餐内容可根据客户需求进行调整，定制化需求另行报价。</p>
                <p>5. 付款方式：合同签订后支付50%预付款，系统上线后支付剩余50%。</p>
            </div>
        </div>
        
        <!-- 页脚信息 -->
        <div class="footer-info">
            <div class="signature">
                <div>销售代表: 张经理</div>
                <div style="margin-top: 30px;">(签名)</div>
            </div>
            <div class="contact-info">
                <div>联系电话: 400-123-4567</div>
                <div>电子邮箱: sales@example.com</div>
                <div>公司地址: 北京市朝阳区XX大厦A座1001室</div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 返回编辑按钮
            document.getElementById('back-btn').addEventListener('click', function() {
                // 在实际应用中，这里会跳转到编辑页面
                alert('返回编辑页面');
            });
            
            // 切换视图按钮
            document.getElementById('switch-view-btn').addEventListener('click', function() {
                // 在实际应用中，这里会切换到列表视图
                alert('切换为列表视图');
            });
            
            // 打印按钮
            document.getElementById('print-btn').addEventListener('click', function() {
                window.print();
            });
            
            // 导出PDF按钮
            document.getElementById('export-btn').addEventListener('click', function() {
                // 在实际应用中，这里会调用PDF导出功能
                alert('正在导出PDF文件...');
            });
        });
    </script>
</body>
</html>
